<!-- eslint-disable vue/valid-template-root -->
<template>
  <div id="app">
    <div class="container">
      <!-- 头部 -->
      <div class="titleInfo">
        <img src="../../assets/404_images/sdLogo.png" height="100%" alt class="logo">
        <div class="titleName" style="font-size:20px;font-weight:bold">用户中心用户身份验证 v1.0.9.1014</div>
        <div class="operation">
          <a class="operaInfo">设为首页</a> |
          <a class="operaInfo">收藏</a>
        </div>
      </div>
      <!-- 登录部分 -->
      <div class="login-container">
        <!-- 滑块 -->
        <div v-if="checkSlider" class="slider">
          <Slider @SliderSucess="SliderSucess" @closeSlider="closeSlider" />
        </div>
        <div class="title-container" />
        <div class="login-form" style="float:left">
          <div class="chooseLogin">
            <div class="chooseLoginItem">账号登录</div>
          </div>
          <!-- 表单信息 -->
          <el-form ref="loginMessage" :model="loginMessage" :rules="rules" class="demo-ruleForm">
            <el-form-item prop="code">
              <el-input id="txtCode" v-model="loginMessage.code" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input id="txtPassword" v-model="loginMessage.password" show-password />
            </el-form-item>
            <el-form-item prop="account">
              <el-input id="txtTenant" v-model="loginMessage.account" />
            </el-form-item>
          </el-form>
          <!-- check框信息 -->
          <div class="checkBox">
            <div class="checkLeft" style="float:left">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
            <div class="checkRight" style="float:right">
              <span>找回密码</span>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="item_content">
            <el-button id="btnLogin" :loading="loading" type="primary" @click="submit">登录</el-button>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="webInfo">
        <div class="info-container">
          <div class="beian">闽ICP备2021002460号</div>
          <div class="support">CopyRight © 2021-2031 博思软件</div>
          <div class="suggest">
            浏览器：
            <a target="_blank" href="https://www.google.cn/intl/zh-CN/chrome/">chrome90</a>
            /
            <a target="_blank" href="https://www.microsoft.com/en-us/edge">IE10</a>
            以上 | 分辨率建议1024*1960
          </div>
          <img src="http://www.bosssoft.com.cn/uploads/image/20200728/c814a85b5a498422c9329fddffcb63e9.png" width="60px" alt srcset class="code">
          <div class="support2">博思软件</div>
        </div>
      </div>>
    </div>
  </div>

</template>
<script>
// 引入组件
import Slider from './Slider'
// 引入弹窗
import { Message } from 'element-ui'
export default {
  name: 'Login',
  components: {
    Slider
  },
  data() {
    return {
      checked: true,
      loading: false,
      checkSlider: false,
      loginMessage: {
        code: '',
        password: '',
        account: ''
      },
      rules: {
        code: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { min: 6, message: '密码至少为6位', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '租户id', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /*
    * sendrequest()方法，在校验滑块成功后触发
    * 首先通过validate进行表单校验
    * 校验通过则通过dispatch store里的 'user/login' 的action，传入表单数据
    * 成功则进行路由跳转，失败则返回错误
    * ----------------------------------------------------------------
    * 逻辑：
    * 通过dispatch('user/login')执行user.js中的action:login
    * login中调用封装的login方法（提交表单数据）、设置token)
    * login方法中调用请求在api/authentication(login请求)
    * 在utils/request.js配置请求拦截器->通过检测store/getters.js 是否有token
    * 有的话，就在请求头设置['accessToken'] = getToken()
    * getToken()方法来源于 utils/auth.js设置token和得到token
    */
    sendrequest() {
      this.loading = true
      this.$refs.loginMessage.validate((valid) => {
        if (!valid) {
          Message({
            message: '登录信息无效',
            type: 'error',
            duration: 5000
          })
          this.loading = false
        } else {
          this.$store.dispatch('user/login', this.loginMessage).then(res => {
            if (res.code === 200) {
              Message({
                message: res.msg,
                type: 'success',
                duration: 5000
              })
              // 路由跳转
              this.$router.push({ path: this.redirect || '/' })
            } else {
              Message({
                message: res.msg,
                type: 'error',
                duration: 5000
              })
            }
            this.loading = false
          }).catch(() => {
            Message({
              message: '调用服务器发生异常，请检查网络',
              type: 'error',
              duration: 5000
            })
            this.loading = false
          })
        }
      })
    },
    submit() {
      // 切出滑块组件
      this.checkSlider = true
    },
    // 滑块成功校验
    SliderSucess() {
      var that = this
      setTimeout(function() { that.checkSlider = false }, 1000)
      this.sendrequest()
    },
    closeSlider() {
      this.checkSlider = false
    }
  }
}
</script>
<style lang="css" scoped>
   *,:after,:before{
    box-sizing:inherit;
   }
   /* 去除图片边框 */
   img {
    border-style: none;
   }
   .container{
    width:100%;
    height:100vh;
    overflow: hidden;
   }
   /* 头部 */
   .container .titleInfo{
    height: 8%;
    width: 100%;
    position: relative;
   }
   /* 头部logo */
   .container .titleInfo .sdLogo{
    vertical-align: middle;
    text-align: center;
   }
   /* 头部标签 */
   .container .titleInfo .titleName{
    position:absolute;
    display: inline-block;
    top:16px;
    text-align: center;
    margin-left: 15px;
    line-height: 20px;
   }
   /* 头部右侧 */
   .container .titleInfo .operation{
    position: absolute;
    right: 10px;
    top: 20px;
   }
   /* 超链接 */
   a, a:focus, a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
   }
   /* 中间部分 */
  .container .login-container{
    width: 100%;
    height: 82%;
    background: url(http://www.bosssoft.com.cn/uploads/image/20210902/b182298050028e4584670bbffcfaf7f0.jpg) no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: relative;
  }
  .container .login-container .title-container{
    position: relative;
    margin-top: 50px;
  }
  /* 登录表盘 */
  .container .login-container .login-form{
    position: absolute;
    width: 520px;
    height: 400px;
    max-width: 100%;
    padding: 20px 35px 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 1em;
    background-color: #fff;
  }
  /* 登录账号 */
  .chooseLogin{
   color:black;
  }
  .chooseLogin .chooseLoginItem{
    line-height: 50px;
    padding: 0 10px;
    cursor: pointer;
  }
  .login-form .item_content{
    width: 100%;
    height: 80px;
  }
  .login-form .item_content .warning{
    color:red;
  }
  .login-form .item_content .el-input{
    width: 100%;
    height:40px;
  }
  /* 设置按钮 */
  .login-form .item_content .el-button{
    width: 100%;
  }
  /* 底部 */
  .container .webInfo{
    width: 100%;
    height: 10%;
    background-color: #e4e7ed;
    position: relative;
    margin: 0;
  }
  .container .webInfo .info-container{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  }
  .container .webInfo .info-container .beian{
    color: #687f7f;
    font-size: 13px;
    width: 194px;
    margin: 10px auto 5px;
  }
  .container .webInfo .info-container .support{
    margin: 10px auto 5px;
    color: #687f7f;
    font-size: 13px;
    width: 260px;
  }
  .container .webInfo .info-container .suggest{
    color: red;
    margin: 10px auto 5px;
    width: 380px;
    font-size: 14px;
  }
  .container .webInfo .info-container .support2{
    position: absolute;
    bottom: 2px;
    right: 10px;
    font-size: 13px;
  }
  .container .webInfo .info-container .code{
    position: absolute;
    top: 10px;
    right: 30px;
   }
   .checkBox{
    margin-bottom:50px;
   }
</style>
